<template>
  <div class="top_close_box" @click="toggleClick">
    <!--    <svg-->
    <!--      :class="{'is-active':isActive}"-->
    <!--      class="hamburger"-->
    <!--      viewBox="0 0 1024 1024"-->
    <!--      xmlns="http://www.w3.org/2000/svg"-->
    <!--      width="64"-->
    <!--      height="64"-->
    <!--      color="#ffffff"-->
    <!--    >-->
    <!--      <path-->
    <!--        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"-->
    <!--        fill="#ffffff"/>-->
    <!--    </svg>-->

    <svg t="1692085329357" class="icon cp" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
      p-id="2465" width="18" height="18" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path
        d="M839.68 899.072c-13.312 0-26.624-5.12-36.864-15.36l-655.36-675.84c-19.456-20.48-18.944-52.736 1.024-72.192 20.48-19.456 52.736-18.944 72.192 1.024l655.36 675.84c19.456 20.48 18.944 52.736-1.024 72.192-9.728 9.728-22.528 14.336-35.328 14.336z"
        fill="#9EA7C0" p-id="2466"></path>
      <path
        d="M174.08 888.832c-13.312 0-26.624-5.12-36.864-15.36-19.456-20.48-18.944-52.736 1.024-72.192l675.84-655.36c20.48-19.456 52.736-18.944 72.192 1.024 19.456 20.48 18.944 52.736-1.024 72.192l-675.84 655.36c-9.728 9.728-22.528 14.336-35.328 14.336z"
        fill="#9EA7C0" p-id="2467"></path>
    </svg>
  </div>
</template>

<script>
  export default {
    name: 'Hamburger',
    props: {
      isActive: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      toggleClick() {
        this.$emit('toggleClick')


      }
    }
  }
</script>

<style scoped>
  .top_close_box {
    padding-top: 15px;
    padding-left: 18px;
    height: 49px;
    box-sizing:border-box;
  }

  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    color: white;
    /*transform: rotate(180deg);*/
  }

  .hamburger.is-active {
    transform: rotate(180deg);
  }

  /deep/.icon {
    padding: 2px;
    transition: 0.2s;
    width: 16px !important;
    height: 16px !important;
  }

  /deep/.icon:hover {
    box-shadow: 0 0 4px #0003 !important;
  }
</style>